<template>
  <div class="_wrap">
    <div class="_top">
      <div class="_item"></div>
      <div class="item" v-for="(item, i) in totalArr" :key="i">
        <div class="icon"><img :src="item.ico"></div>
        <div class="info">
          <div class="label">{{item.label}}({{item.unit}})</div>
          <div class="value"><count-to ref="countTo" class="val" :start-val="0" :end-val="item.value" :duration="3600" /></div>
        </div>
      </div>
    </div>
    <div class="_table">
      <div class="_row" v-for="(item, i) in schoolList" :key="i">
        <div class="item label">{{item.label}}</div>
        <div class="item">{{item.sNum}}</div>
        <div class="item">{{item.wNum}}</div>
        <div class="item">{{item.pNum}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import countTo from 'vue-count-to'
  export default {
    name: 'itemCenterTop',
    components: { countTo },
    data() {
      return {
        interval: null,
        totalArr: [
          { ico: require('@/assets/img/icon1.svg'), label: '学校数', value: 343, unit: '所' },
          { ico: require('@/assets/img/icon4.svg'), label: '教职工数', value: 13914, unit: '人' },
          { ico: require('@/assets/imgPersonnel/icon1.svg'), label: '岗位编制数', value: 7287, unit: '人' }
        ],
        schoolList: [
          { label: '幼儿园', sNum: 152, wNum: 3755, pNum: 375 },
          { label: '小学', sNum: 83, wNum: 5439, pNum: 3464 },
          { label: '初中', sNum: 33, wNum: 3004, pNum: 1965 },
          { label: '高中', sNum: 12, wNum: 1957, pNum: 881 },
          { label: '中职', sNum: 2, wNum: 1, pNum: 398 },
          { label: '其他', sNum: 0, wNum: 0, pNum: 0 }
        ]
      }
    },
    beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
    mounted() {
      this.handleStart()
    },
    methods: {
      handleStart(){
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          for (let i = 0; i < this.$refs.countTo.length; i++){
            this.$refs.countTo[i].start()
          }
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      },
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    padding: 16px 16px 24px; overflow: hidden; background: rgba(0,16,43,0.32); border: 1px solid;
    border-image: linear-gradient(to bottom, rgba(8,132,255, .1), rgba(8,132,255,1)) 1;
    /*height: 670px;*/
    ._top {
      padding-top: 16px;
      display: grid; grid-template-columns: 130px 1fr 1fr 1fr;
      .item {
        display: flex; align-items: center; justify-content: center;
        .icon {
          width: 72px; height: 72px; position: relative;
          display: flex; align-items: center; justify-content: center;
          &::before {
            content: ''; display: block; position: absolute; z-index: 1;
            width: 100%; height: 100%; background: url('~@/assets/img/iconBg.svg') no-repeat;
            animation: rotate 10s linear infinite;
          }
          img { width: 32px; display: block; position: relative; z-index: 33; }
          @keyframes rotate {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
        }
        .info {
          margin-left: 10px;
          .label { font-size: 20px; font-family: PingFangSC; letter-spacing: 1.2px; font-weight: bold; }
          .value {
            font-size: 36px; color: #00FFFA; font-family: DINPro; letter-spacing: 2.16px;
          }
        }
      }
    }
    ._table {
      overflow: hidden; padding-top: 12px;
      ._row {
        display: grid; grid-template-columns: 130px 1fr 1fr 1fr; position: relative;
        background-color: rgba(7,171,220,.16); height: 80px; margin-top: 8px;
        &:after {
          content: ''; display: block; width: 100%; height: 4px; background: url('~@/assets/imgSchoolHouse/divider_l.svg') no-repeat;
          position: absolute; bottom: 0; z-index: 2;
        }
        .item { font-size: 32px; font-family: DINPro; letter-spacing: 1.92px;  display: flex; align-items: center; justify-content: center; }
        .label { font-size: 22px; letter-spacing: 1.32px; }
      }
    }
  }
</style>
